<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <style type="text/css">
      * {  margin: 0;  padding: 0;  border: 0;  list-style: none;  }
      body {  background: #f5f5f5;  }
      .all {  width: 752px;  padding: 10px 0 0 10px;  border: 1px solid #ccc;  margin: 100px auto;}
      .all ul {  overflow: hidden; }
      .all li {  float: left;  width: 178px;  height: 125px;  margin: 0 10px 10px 0;  position: relative; cursor: pointer; }
      .all p {  height: 24px;  line-height: 24px;  position: absolute;  left: 0;  bottom: 0;  width: 100%;  text-align: center;  color: #fff;  font-size: 14px;  background: rgba(0, 0, 0, 0.3) url(images/bg.png) no-repeat 0 0; display: none; }
    </style>
    <script src="jquery-1.7.2.min.js"></script>
    <script>
        $(function () {
            $(".all p").each(function(index,element){
                var index = -24 * index;
                $(element).css({background: 'rgba(0, 0, 0, 0.3) url(images/bg.png) no-repeat 0 '+index+'px'})
            });
            $(".all li").hover(function(){
                $(this).children('p').stop().slideToggle();
            });
        });
    </script>
</head>
<body>
<div class="all">
    <ul>
        <li>
            <img src="images/01.JPG" alt="" width="178" height="125">
            <p>百度一下， 你就知道</p>
        </li>
        <li>
            <img src="images/02.JPG" alt="" width="178" height="125">
            <p>百度一下， 你就知道</p>
        </li>
        <li>
            <img src="images/03.JPG" alt="" width="178" height="125">
            <p>百度一下， 你就知道</p>
        </li>
        <li>
            <img src="images/04.JPG" alt="" width="178" height="125">
            <p>百度一下， 你就知道</p>
        </li>
        <li>
            <img src="images/05.JPG" alt="" width="178" height="125">
            <p>百度一下， 你就知道</p>
        </li>
        <li>
            <img src="images/06.JPG" alt="" width="178" height="125">
            <p>百度一下， 你就知道</p>
        </li>
        <li>
            <img src="images/07.JPG" alt="" width="178" height="125">
            <p>百度一下， 你就知道</p>
        </li>
        <li>
            <img src="images/08.JPG" alt="" width="178" height="125">
            <p>百度一下， 你就知道</p>
        </li>
    </ul>
</div>
</body>
</html>